<template>
  <!-- h5-nav-height="28" -->
  <u-sticky
    bg-color="#FAFAFA"
    ref="u-sticky"
    @child-mounted-done="childMountedDone"
  >
  <!-- style="box-sizing: border-box" offset-top="-30" -->
    <slot>
      <view class="padding  xm-title" ref="xm-title">
        <view class="xm-title-p1">{{ projectno }}</view>
        <view class="xm-title-p2">{{ projectname }}</view>
        <image :src="src" class="xm-title-img"></image>
      </view>
    </slot>
  </u-sticky>
</template>
  <script>
export default {
  props: {
    projectname: { type: String, default: "" },
    projectno: { type: String, default: "" },
  },
  data() {
    return {
      src: "/static/image/zfgs/index/icon@2x.png",
    };
  },
  mounted() {
    // 假设这里有一些异步操作
    this.$refs["u-sticky"].$on("child-mounted-done", this.childMountedDone);
  },
  methods: {
    childMountedDone() {
      this.$emit("child-mounted-done");
    },
  },
  beforeDestroy() {
    this.$refs["u-sticky"].$off("child-mounted-done", this.childMountedDone);
  },
};
</script>
  <style scoped lang="scss">
.xm-title {
  border-radius: 20rpx;
  font-size: 36rpx;
  background-color: #fff;
  position: relative;
  box-sizing: border-box;
  .xm-title-p1 {
    color: #999999;
    font-size: 36rpx;
    line-height: 40rpx;
    margin-bottom: 8rpx;
  }
  .xm-title-p2 {
    color: #3d3d3d;
    line-height: 48rpx;
  }
  .xm-title-img {
    width: 46rpx;
    height: 50rpx;
    position: absolute;
    top: 0;
    right: 32rpx;
  }
}
.margin {
  // background-color: #fafafa;
}
</style>